<template>
  <div class="main">
    <div class="title">创建签到</div>
     <Form :model="sign" label-position="left"  :label-width="100">
        <FormItem label="签到标题">
            <Input v-model="sign.title" placeholder="请输入签到标题" required ></Input>
        </FormItem>
         <FormItem label="签到描述">
            <Input v-model="sign.desc" type="textarea" :autosize="{minRows: 5,maxRows: 15}" placeholder="请输入签到描述" ></Input>
        </FormItem>
       <FormItem label="签到地点范围">
         <Input v-model="sign.addRessrange" type="number" placeholder="请输入签到范围半径单位KM" required ></Input>
       </FormItem>
       <Form-item label="选择班级：" >
         <i-select  placeholder="请选择班级" v-model="sign.class_id">
           <i-option v-for=" item in classList" :value="item.class_id" :key="item.class_id">{{item.class_name}}</i-option>
         </i-select>
       </Form-item>
       <FormItem label="起始日期">
         <i-col span="12">
           <Date-picker type="date" placeholder="选择签到开始日期" style="width: 200px" @on-change="getStartTime"></Date-picker>
         </i-col>
       </FormItem>
       <FormItem label="结束日期">
         <i-col span="12">
           <Date-picker type="date" placeholder="选择签到结束日期" style="width: 200px" @on-change="getEndTime"></Date-picker>
         </i-col>
       </FormItem>
       <FormItem label="签到协议">
         <Input v-model="sign.protocol" type="textarea" :autosize="{minRows: 5,maxRows: 15}" placeholder="请输入签到协议" ></Input>
       </FormItem>
       <FormItem label="签到备注">
         <Input v-model="sign.remake" type="textarea" :autosize="{minRows: 5,maxRows: 15}" placeholder="请输入签到备注1" ></Input>
       </FormItem>
      </Form>
    <div class='btn'>
      <Button type="primary" @click="add">创建签到</Button>
    </div>
    <div>
      <baidu-map  class="map" @ready="map_handler">
      </baidu-map>
    </div>
  </div>

</template>

<script>
import api from '../../api/index.js'
import {mapState} from 'vuex'
export default {
    name:'departmentAdd',
    props:{},
    data () {
      return {
        classList:[],//获取班级列表
            BMap:{},
            map:{},
            sign:{
              title:null,
              desc:null,
              start_time:null,
              end_time:null,
              creater:null,
              longitude:null,
              latitude:null,
              class_id:null,
              protocol:null,
              remake:null,
              addRessrange:null
            }
      };
    },
  computed:{
    ...mapState([
      'user'
    ])
  },
    mounted() {
      // this.getData()
    api.getClassListByCreater(this.user.user_number).then(res=>{
      if(res.status==1){
        this.classList=res.data;
      }
    })
    },
    methods: {
      // 初始化地图
      map_handler({ BMap, map }) {
        //获取当前位置的经纬度
        this.BMap = BMap;
        this.map = map;
        if (!this.BMap) return false;
        let geolocation = new BMap.Geolocation();
        let _this = this;
        geolocation.getCurrentPosition(function(r) {
          _this.sign.longitude = r.point.lng; //纬度
          _this.sign.latitude = r.point.lat; //经度
        })
      },
      add(){
        console.log(this.sign);
        if(!this.sign.title){
          this.$Message.warning('请您输入签到标题');
          return;
        }else if(!this.sign.addRessrange){
          this.$Message.warning('请您输入签到范围');
          return;
        }else if(!this.sign.start_time){
          this.$Message.warning('请您选择签到开始时间');
          return;
        }else if(!this.sign.end_time){
          this.$Message.warning('请您选择结束时间');
          return;
        }else {
          this.sign.creater=this.user.user_number;
          console.log(this.sign);
          api.addSign(this.sign).then(res=>{
            if(res.status==1){
              this.$Message.success('创建签到成功');
            }
          })
        }

        //发送数据
      },
      getStartTime(date){
        this.sign.start_time=date.toLocaleString();
      },
      getEndTime(date){
        this.sign.end_time=date.toLocaleString();
      }
      }
  }
</script>
<style lang='scss' scoped>
  .map {
    display: none;
  }
.main{
    width: 50%;
    margin: 0 auto;
    font-size: 16px;
    .title{
      margin-top: 20px;
        text-align: center;
        font-size: 20px;
        margin-bottom: 20px;
    }
    .ivu-form-item{
        margin-bottom: 20px;

    }
    .btn{
       margin-top: 40px;
        text-align: center;
    }
}

</style>
